<%--
  Created by IntelliJ IDEA.
  User: Joker X
  Date: 2022/3/20
  Time: 10:29
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    <title>ajax练习</title>
    <script type="text/javascript">
        function a1(){
            $.post({
                url:"${pageContext.request.contextPath}/ajax.jsp/ajax",
                data:{'name':$("#textName").val()},
                success:function(data,status){
                    alert(data);
                    alert(status);
                }
            });
        }

        $(function(){
            $("#btn").click(function(){
                // 这里使用另一种书写方式，除了第一个url是必须写的，其他都可以选写
                $.post("${pageContext.request.contextPath}/ajax.jsp/ajax2",function(data){
                    console.log(data);
                    var html = "";
                    for (var i = 0; i < data.length; i++) {
                        html += "<tr>" +
                            "<td>" + data[i].name + "</td>" +
                            "<td>" + data[i].hobby + "</td>" +
                            "<td>" + data[i].identity + "</td>" +
                            "</tr>"
                    }
                    // 获取html中的数据放到 id为content的标签中
                    $("#content").html(html);
                })
            });
        });

        function a2(){
            $.post({
               url:"${pageContext.request.contextPath}/ajax.jsp/ajax3",
               data:{'name':$("#name").val()},
               success:function(data){
                   if(data.toString() == 'OK'){
                       $("#nameInfo").css("color","green");
                   }else{
                       $("#nameInfo").css("color","red");
                   }
                   $("nameInfo").html(data);
               }
            });
        }

        function a3(){
            $.post({
               url:"${pageContext.request.contextPath}/ajax.jsp/ajax3",
               data:{'pwd':$("#pwd").val()},
               success:function(data){
                   if(data.toString() == 'OK'){
                       $("#pwdInfo").css("color","green");
                   }else{
                       $("#pwdInfo").css("color","red");
                   }
                   $("#passwordInfo").html(data);
               }
            });
        }
    </script>
</head>
<body>
用户名：<input type="text" id="textName" onblur="a1()"> <br>
<button type="button" id="btn">获取数据</button>
<table>
    <thead>
        <tr>
            <th>姓名</th>
            <th>爱好</th>
            <th>身份</th>
        </tr>
    </thead>
    <tbody id="content">
    </tbody>
</table>

<p>
    用户名：<input type="text" id="name" onblur="a2()">
    <span id="nameInfo"></span>
</p>
<p>
    密码：<input type="password" id="pwd" onblur="a3()">
    <span id="pwdInfo"></span>
</p>


</body>
</html>
